<template>
  <div class="pagae">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="formInline.user" placeholder="名称搜索"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>重置</el-button>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <el-container style="margin-top:50px;">
      <el-aside class="aside" width="20%" style="padding:0px 5px;">
        <el-button type="primary" style="margin-bottom:10px" @click="addrole()"
          >新增角色</el-button
        >
        <el-table
          :data="username"
          style="width: 100%;font-size: 18px"
          @row-click="rowclick"
        >
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-aside>

      <el-main class="main">
        <el-form :inline="true" :model="user" class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input v-model="user.username" :disabled="disable"></el-input>
          </el-form-item>
        </el-form>
        <div class="header" style="margin-bottom:10px;">
          <h3 style="display:inline-block">权限详情</h3>
          <el-button type="primary" style="float: right;" @click="edit"
            >编辑</el-button
          >
        </div>

        <div class="detail">
          <el-tree
            ref="tree"
            :data="rightlist"
            show-checkbox
            node-key="id"
            :default-expand-all="true"
            :default-checked-keys="checkedarr"
            :props="defaultProps"
          ></el-tree>
        </div>

        <div class="bjbtn" v-if="display">
          <el-button
            style="float: left;line-height: 36px;"
           @click="getCheckedKeys"
          >全选</el-button>
          <el-button>取消</el-button>
          <el-button type="primary">完成</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { permissionrole } from "@/api/rightsManagement.js";
export default {
  data() {
    return {
      formInline: {
        user: ""
      },
      user: {
        username: ""
      },
      username: [
        {
          name: "王小虎"
        },
        {
          name: "aaa"
        }
      ],
      display: false,
      disable: true,
      rightlist: [],
      checkedarr: [10101,103],
      defaultProps: {
        children: 'child',
        label: 'name'
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // let data = { name: this.formInline };
      permissionrole().then(res => {
        console.log(res);
        this.rightlist = res.rows;
      });
    },
    edit() {
      this.display = true;
      this.disable = false;
      var arr = this.$refs.tree.getCheckedNodes()
      console.log(arr)
    },
    rowclick(row) {
      console.log(row);
      this.user.username = row.name;
    },
    // 全选
    getCheckedKeys() {
        this.$refs.tree.setCheckedKeys([1,2]);
      },
    // 新增角色
    addrole() {
      this.$router.push({
        path: "addrole"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pagae {
  margin: 40px;
  .main {
    border-left: 1px solid #ccc;
  }
  .title {
    font-size: 17px;
  }
  .detail{
    margin-left:18px;
  }
  .bjbtn {
    text-align: right;
    margin-top: 20px;
  }
}
/deep/.el-tree-node__label{
  font-size:18px;
}
/deep/.el-tree-node__content{
  margin-bottom:8px
}

</style>
